<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <meta name="format-detection" content="telephone=no">
<title>{{$name_en}}</title>
    <link rel="stylesheet" href="{{asset('/api/static/css/base.css')}}">
    <script>
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
      };
    recalc(); 
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>
<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
body {
    background-color: #071724;
}
.navBox {
    width: 100%;
    height: 12%;
    padding-bottom: .06rem;
}
.nav {
    padding: 0 0 0 1%;
    margin: 0; 
    width: 100%;
    height: 100%;
    background-color: #131E30;
}
.nav li {
    width: 11%;
    list-style: none;
    float: left;
    font-size: .2rem;
    text-align: center;
    line-height: .7rem;
    color: #758DA7;
    font-family: "Microsoft Yahei";
}
.nav li.active {
    color: #C2CDD8;
    position: relative;
}
.nav li.active span {
    display: block;
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 30%;
    border-bottom: 2px solid #C2CDD8;
}
#chart-panel {
    width: 100%;
    height: 88%;
}
</style>
</head>

<body>
<div class="navBox">
    <input type="hidden" name="id" value="{{$id}}">
    <input type="hidden" name="time_type" value="{{$time_type}}">
    <ul class="nav">
        <!-- <li data-type="1"  data-time="60"><span></span>1分钟</li> -->
        <li data-type="2" data-time="300"><span></span>5分钟</li>
        <li data-type="3" data-time="900"><span></span>15分钟</li>
        <li data-type="4" data-time="1800"><span></span>30分钟</li>
        <li data-type="5" data-time="3600"><span></span>1小时</li>
        <li data-type="6" data-time="14400"><span></span>4小时</li>
        <li data-type="0" data-time="86400" class="active"><span></span>1天</li>
        <li data-type="8" data-time="604800"><span></span>1周</li>
        <li data-type="9" data-time="2592000"><span></span>1月</li>
        <li class="last" onclick="window.location.href='/api/depth_line?id='+{{$id}}">深度</li>
    </ul>
</div>
<div id="chart-panel"></div>


<script src="{{asset('/api/static/js/jquery-1.10.2.min.js')}}"></script>
<script src="{{asset('/api/static/js/echarts.min.js')}}"></script>
<script src="{{asset('/api/static/js/base.js')}}"></script>
    <script src="{{ asset('/js/socket.io.js') }}"></script>
<script>
var type = 0, time = 86400*1000, id=$('input[name=id]').val(), time_type = $('input[name=time_type]').val() || 0;
var gg = true;
$('.nav').find('li').not('.last').each(function(e, i) {
    type = $(this).data('type');
    if(type == time_type){
        $(this).addClass('active');
    }else{
        $(this).removeClass('active');
    }
    $(this).click(function() {
        if( !$(this).hasClass() ){
            gg = false;
            // $('.nav').find('li').removeClass('active');
            // $(this).addClass('active');
            type = $(this).data('type');
            time = $(this).data('time')*1000;
            time_type = $(this).data('type');
            echo_chart()
            if( gg ){
                $('.nav').find('li').removeClass('active');
                $(this).addClass('active');
            }
            window.ttp.changeTimeType(time_type)
        }
    })
})
$('.klineInfo').click(function(){
    if( $('.showInfo').hasClass('hide') ){
        $('.showInfo').removeClass('hide') 
    }
});
$('.showInfo').click(function(){
    $(this).addClass('hide') 
});
changeClassByType();
echo_chart()
//改变样式
function changeClassByType(){
    $('.nav').find('li').each(function(e, i) {
        type = $(this).data('type');
        if(type == time_type){
            $(this).addClass('active');
        }else{
            $(this).removeClass('active');
        }
    })
}
function echo_chart(){
    $.ajax({
        url: "/api/index_kline_data",
        type: 'POST',
        async: false,
        data: {'id': id,'time_type':time_type},
        dataType: 'JSON',
        success: function(repo){
            // console.log(repo)
            var $data = repo.data.data;
            console.log(Date.parse(new Date()), $data)
            market_chart('chart-panel', $data);
            gg = true;

            var timer = null;
            clearInterval(timer);
            timer = setInterval(function () {
                $.ajax({
                    url: "/api/index_kline_data",
                    type: 'POST',
                    data: {'id': id,'time_type':time_type},
                    dataType: 'JSON',
                    success: function(repo){
                        // console.log(repo)
                        var $data = repo.data.data;
                        console.log(Date.parse(new Date()), $data)
                        market_chart('chart-panel', $data);
                    }
                })
            }, time);
        }
    });
}
// index_kline_head()
// function index_kline_head(){
//     $.ajax({
//         url: "/api/index_kline_head",
//         type: 'POST',
//         data: {'id': id },
//         dataType: 'JSON',
//         success: function(repo){
//             console.log(repo)
//             var $data = repo.data;
//             console.log(Date.parse(new Date()), time, $data)
//             market_chart('chart-panel', $data);
//             var timer = null;
//             clearInterval(timer);
//             timer = setInterval(function () {
//                 $.ajax({
//                     url: "/api/index_kline_head",
//                     type: 'POST',
//                     data: {'id': id },
//                     dataType: 'JSON',
//                     success: function(repo){
//                         // console.log(repo)
//                         var $data = repo.data;
//                         console.log(Date.parse(new Date()), time, $data)
//                         market_chart('chart-panel', $data);
//                     }
//                 })
//             }, 10000);
//         }
//     });
// }
</script>
</body>
</html>
